<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>V_for_And_its_applications</title>
    <script src="../Vue.js" type="text/javascript"></script>
</head>
<body>
    <div id="app">
        <h3>明星列表</h3>
        <ul>
            <li v-for="item in stars">{{item}}</li>
        </ul>
        <h3>学生列表</h3>
        <ul>
            <li v-for="item,key in students">
                索引值:{{key}}
                姓名:{{item.Name}},
                年龄:{{item.age}},
                学校:{{item.school}}
            </li>
        </ul>
        <h3>循环对象</h3>
        <ul>
            <li v-for="item,key in students[0]">
                {{item}},{{key}}
            </li>
        </ul>
        <h3>条件循环对象</h3>
        <ul>
            <li v-for="item,key in students" v-if="key%2==0">
                {{item}},{{key}}
            </li>
        </ul>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            data:{
              stars:['凡凡','翔翔','ReRe'],
              students:[
                  {
                      Name:'larry',
                      age:2,
                      school:'pku'
                  },
                  {
                      Name:'Merry',
                      age:27,
                      school:'xmu'
                  },
                  {
                      Name:'Qurry',
                      age:24,
                      school:'tsu'
                  }
              ]
            }
        })
    </script>
</body>
</html>